import React from "react";
import { Link, Routes, Route } from "react-router-dom";

const Home = () => {
  return <div>home页面</div>;
};
const About = (props) => {
  // console.log(props);
  return <div>about页面</div>;
};

const App = () => {
  return (
    <>
      <h2>router-v6-basic</h2>
      <ul>
        <li>
          <Link to="/">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      {/* Routes组件一定要加,默认就是排他性路由 */}
      {/* 渲染组件只能使用element属性，element里面要写实例化的标签 */}
      {/* 默认是精准匹配 */}
      {/* 默认是没有路由信息了，需要使用hooks去获取 */}
      {/* useLocation, useParams, useMatch依旧可以用，useHistroy没了 */}
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
